tailwind sprinkles

Tailwind works by scanning all files (HTML/JS components/etc) and generates corresponding styles into a static CSS file. There are various ways to incporporate CSS; stylized components, emotion, etc. While these tend to be tied to React, Tailwind is not.

Putting some Tailwind into the mix, as per ush (pronounced yoush) let's npm i stuff... tailwind, postcss and autoprefixer

tailwind (compiler) will make that CSS sheet I mentioned up there somewhere + postCSS + autoprefixer which is basically Babel (transpiler), but for CSS. Meaning you can write modern code and it'll do some backwards compatible magic to work with older browsers.

Why 3 things instead of just one... well, this way w.e may get versioned up doesnt affect the other stuff. I guess in short, none are dependant of eachother and can update as needed without tracking eachother as dependencies.

And noooow let's get it...

tailwind - docs

• npx tailwindcss init -p spits out a starter config file for tailwind and for postcss (that's what adding the -p does).

• when putting tailwind directives into your css, ie: @tailwind base; you may not dig the squiggly lines that show up... you can silence that in your settings. I'm using vscode presently; command + , check out your settings.json and add "css.lint.unknownAtRules": "ignore".

• useful plugin for editor: Tailwind CSS IntelliSense

• plugin that sorts your classes: prettier-plugin-tailwindcss

As for actually styling with tailwind, some stuff can be a bit intuitive just from using css in general like m-0 is margin: 0, either way, you can always take a look at the docs.

After using tailwind for a bit you may find yourself copy/pasting, something that would normally be put into some class. In general, tailwind doesn't vibe with the typical css way of doing things, but there is a way to have reusable type styles if you happen to have such a case. But, be forewarned of slippery slopeness.

example:

@layer components {
  .search-input {
    @apply mb-5 block w-60;
  }
}

@layer utilities {
  .grayed-out-disabled {
    @apply disabled:opacity-50;
  }
}

If you recall, upon installing tailwind, the css file that would have housed all the css classes/etc ended up with 3 directives. 2 of those are used in the example above, ie: components and utilities.

note:

• base layer; default styles (conflicting css, takes least priority)
• components layer; the usual styles, css classes type stuff
• utilities layer; modifier type classes, like disabled (takes highest priority)

lastly, yes, you are able to write css in those up there, but when in tailwind universe do as the tailwinders do.